<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客屋</title>
    <link href="js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/videoCourse.css" rel="stylesheet">
    <!-- PX-VIDEO CSS -->
    <link rel="stylesheet" href="lib/accessible/css/px-video.css" />
    <style>
        ul {
            padding-left: 0px;
        }
        
        ul li {
            list-style: none;
        }
        
        .class__price_p {
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
        }
        
        .class__price_p span {
            color: red;
            font-size: 24px;
        }
        
        .class__price_recommend {
            padding-left: 10px;
            font-family: "微软雅黑", "Helvetica Neue", Helvetica, STHeiTi, sans-se;
            color: #999;
        }
        
        .buy_button {
            width: 30%;
        }
        /**课程列表**/
        
        .course_catalogue li {
            height: 26px;
            line-height: 26px;
            font-size: 18px;
        }
    </style>

    <body id="app">
        <nav class="navbar navbar-default navbar-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">博客屋</a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                </div>
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                        <li><a href="http://blogwu.cn:8000/blogwuclass.html"><span class="glyphicon glyphicon-fire"></span> 视频</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-list"></span> 博客</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-comment"></span> 论坛</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> 注册</a></li>
                </div>
            </div>
        </nav>
        <div class="tab1">
            <div class="container">
                <ol class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">视频教程</a></li>
                    <li class="active">龙果开源支付系统业务介绍与部署</li>
                </ol>
                <!--主体内容-->
                <div class="row">
                    <div class="col-md-7 col-xs-12 col-sm-12">
                        <img src="../pic/test/4.jpg" alt="..." class="img-thumbnail">
                    </div>
                    <div class="col-md-5 col-xs-12 col-sm-12">
                        <ul>
                            <li>
                                <h3>微服务架构的分布式事务解决方案</h3>
                            </li>
                            <li>
                                <p class="bg-info  class__price_p">
                                    <small> 现价:</small>&nbsp;&nbsp;<span class="class__price"><strong>1399</strong></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <small> <del>原价:&nbsp;&nbsp;999</del></small>
                                </p>
                            </li>
                            <li>
                                <p class="bg-warning  class__price_recommend">
                                    <small>
                                    难度:高级<br> 分类:分布式架构<br>时长:30小时<br>讲师:胡小菜<br>来源:原创<br>
                                    </small>
                                </p>
                            </li>
                            <li class="text-center"><button type="button" class="btn btn-danger buy_button ">购买课程</button> &nbsp;&nbsp;<button type="button" class="btn btn-danger buy_button ">加入购物车</button></li>
                        </ul>
                    </div>
                </div>

                <hr>
                <!--主体内容-->
                <div class="row">
                    <div class="col-md-9">
                        <div>

                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">课程介绍</a></li>
                                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">课程目录</a></li>
                                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">评论</a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">123</div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    <p>&nbsp;</p>
                                    <blockquote>
                                        <p>课程大纲</p>
                                    </blockquote>
                                    <ol class='course_catalogue'>
                                        <li>课程介绍</li>
                                        <li><span style="color:red;">[视频试看]</span>使用Dubbo对传统工程进行服务化改造的思路介绍</li>
                                        <li>使用Dubbo对传统工程进行服务化改造</li>
                                        <li>使用Dubbo进行规模服务化前的工程结构优化</li>
                                    </ol>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="messages">
                                    <p>&nbsp;</p>
                                    <blockquote>
                                        <p>课程评论</p>
                                    </blockquote>
                                    <div class="panel panel-default " v-for="n in 4" style="margin-bottom:10px;">
                                        <div class="panel-body">
                                            <div class="media">
                                                <div class="media-left">
                                                    <a href="#">
                                                        <img class="media-object" src="../pic/test/3_tou.jpg" alt="..." style="height:60px;width:60px;">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">Media heading</h4>
                                                    <span class="class__price_recommend">asdasdasdasdasdasdasd</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3">1</div>
                </div>
            </div>
        </div>



        <script src="js/bootstrap/js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap/js/bootstrap.min.js"></script>
        <script src="../js/vue/vue1.js"></script>
        <!-- end page wrapper container -->
        <script src="lib/accessible/js/strings.js"></script>
        <script src="lib/accessible/js/px-video.js"></script>

        <script>
            var vm = new Vue({
                el: '#app'
            });

            $('#myTabs a').click(function(e) {
                e.preventDefault()
                $(this).tab('show')
            })
        </script>
    </body>

</html>